import 'package:flutter/material.dart';

class ListView4 extends StatelessWidget {
  const ListView4({super.key});

  @override
  Widget build(BuildContext context) {

  // 1. 提供的数据
   const Map orderInfo = {
    'createTime': "2024-08-15 21:49:48",
    'orderState': "待发货",
    'image':
        "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
    'name': "茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯",
    'totalNum': 2,
    'curPrice': 119.5,
    'attrsText': "规格: 白色240ml"
  };


    return Scaffold(
        // 1. 导航条
        appBar: AppBar(
          title: const Text(
            '列表使用-方式3',
            style: TextStyle(color: Colors.white),
          ),
          backgroundColor: Colors.pink,
          centerTitle: true,
        ),
        body: ListView.separated(
            itemBuilder: (BuildContext context, int index) {
              return Container(
                padding: const EdgeInsets.all(15),
                child: Column(
                  children: [
                    // 2.1 日期 和 订单状态
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text(orderInfo['createTime']),
                        Text(
                          orderInfo['orderState'],
                          style: const TextStyle(color: Colors.deepOrange),
                        )
                      ],
                    ),
                    // 2.2 图片 + 名称 + 数量 + 规格 + 单价
                    Padding(
                      padding: const EdgeInsets.only(top: 10),
                      child: Row(
                        children: [
                          // 2.2.1 左侧图片
                          Image.network(
                            orderInfo['image'],
                            width: 100,
                            height: 100,
                            fit: BoxFit.cover,
                          ),
                          // 2.2.2 右侧
                          Expanded(
                              child: Padding(
                            padding: const EdgeInsets.only(left: 8),
                            child: Column(
                              // 侧轴左对齐
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                // 右侧上部第一行
                                Row(
                                  children: [
                                    // 标题
                                    Expanded(child: Text(orderInfo['name'])),
                                    // 数量
                                    Padding(
                                      padding: const EdgeInsets.only(left: 8),
                                      child: Text('x ${orderInfo['totalNum']}'),
                                    )
                                  ],
                                ),
                                // 右侧第二行
                                Padding(
                                  padding: const EdgeInsets.only(top: 8),
                                  child: Container(
                                    padding: const EdgeInsets.only(
                                        left: 8, right: 8, top: 2, bottom: 2),
                                    decoration: BoxDecoration(
                                        color: const Color.fromARGB(
                                            255, 232, 228, 227),
                                        borderRadius: BorderRadius.circular(3)),
                                    child: Text(
                                      orderInfo['attrsText'],
                                      style: const TextStyle(
                                          color: Color.fromARGB(
                                              255, 111, 111, 111)),
                                    ),
                                  ),
                                ),
                                // 右侧第三行
                                Padding(
                                  padding: const EdgeInsets.only(top: 8),
                                  child: Text(
                                    "¥ ${orderInfo['curPrice']}",
                                  ),
                                )
                              ],
                            ),
                          )),
                        ],
                      ),
                    ),
                    // 3. 合计
                    Padding(
                      padding: const EdgeInsets.only(top: 8),
                      child: Container(
                        // color: Colors.red,
                        alignment: Alignment.centerRight,
                        child: Text(
                            '合计: ¥${orderInfo['curPrice'] * orderInfo['totalNum']}'),
                      ),
                    ),
                    // 4. 再次购买
                    Padding(
                      padding: const EdgeInsets.only(top: 8),
                      child: Container(
                          // color: Colors.red,
                          alignment: Alignment.centerRight,
                          child: Container(
                            padding: const EdgeInsets.only(
                                left: 5, right: 5, top: 3, bottom: 3),
                            decoration: BoxDecoration(
                                border: Border.all(
                                    color:
                                        const Color.fromARGB(255, 56, 55, 55)),
                                borderRadius: BorderRadius.circular(3)),
                            child: const Text(
                              '再次购买',
                              style: TextStyle(
                                  color: Color.fromARGB(255, 36, 31, 31)),
                            ),
                          )),
                    )
                  ],
                ),
              );
            },
            separatorBuilder: (BuildContext context, int index) {
              return Container(
                margin: const EdgeInsets.only(left: 9, right: 8),
                height: 1,
                color: const Color.fromARGB(255, 213, 212, 212),
              );
            },
            itemCount: 20));
  }
}
